<script setup>
import "../assets/date"
import axios from "axios"
import { onMounted, ref } from "vue"
let tat = ref("")
let nan = ref(0)
onMounted(() => {
  axios.get("api/gouwuche").then(res => {
    tat.value = res.data.data
  })
})
</script>
<template>
  <div class="box">
    <div class="title">
      校园易购
    </div>
    <div class="qiangdan">
      <div class="heihei">
        <input type="checkbox" class="input">
        <span>全部</span>
        <span>清空购物车</span>
      </div>
      <div class="shangpin" v-for="item in tat">
        <input type="checkbox" class="input">
        <img :src="item.img" alt="" class="tu">
        <div class="wenzi">
          <span>{{ item.name }}</span>
          <span>单价:{{ item.title }}</span>
          <div class="shu">
            <button class="jia" @click="nan++">+</button>
            <span>{{ nan }}</span>
            <button class="jian" @click="nan--">-</button>
          </div>
        </div>
      </div>
    </div>
    <div class="tijiao">
      <div class="qian">
        <span>当前<span class="red">￥8.00</span></span>
        <span>配送时间(早晚8点--10点)</span>
      </div>
      <span class="sb">去结算</span>
    </div>
    <el-col class="yc">
      <RouterLink to="/" class="wz">首页</RouterLink>
      <RouterLink to="/Gouwuche" class="wz">购物车</RouterLink>
      <RouterLink to="/Home" class="wz">我的</RouterLink>
    </el-col>
  </div>
</template>
<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 375px;
  margin: 0 auto;
  border: 1px solid #ccc;
}
.title {
  height: 50px;
  width: 100%;
  border: 1px solid #ccc;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
  line-height: 20px;
}
.input {
  width: 20px;
  height: 20px;
}
.heihei {
  margin: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.heihei span:nth-of-type(1) {
  padding-right: 200px;
}
.tu {
  width: 150px;
  height: 100px;
}
.shangpin {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 10px;
}
.wenzi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 80px;
}
.shu {
  display: flex;
  gap: 5px;
}
.jia {
  border-radius: 999px;
  width: 25px;
  height: 25px;
  border: none;
  text-align: center;
  font-size: 18px;
}

.jian {
  border-radius: 999px;
  width: 25px;
  height: 25px;
  border: none;
  text-align: center;
  font-size: 18px;
}
.yc {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;
  border: 1px solid #ccc;
}

.tijiao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 65px;
  border-radius: 999px;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.qian {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}

.sb {
  width: 100px;
  height: 63px;
  border-radius: 0px 999px 999px 0;
  border: 1px solid #ccc;
  background-color: aqua;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}
.wz {
  color: black;
  text-align: center;
  text-decoration: none;
}
.red{
  color: red;
}
</style>